<div style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px">
	<form id="searchform" >
		<label>姓名：</label><input type="text" name="name"  id="name" value="<%=name%>"/>
		<label>年龄：</label><input type="text" name="age"  id="age" value="<%=age%>"/>
	</form>
	<div style="padding-left: 450px">
		<input type="button" value="查询" onclick="query()" />
	</div>
			
</div>

<div>
	<table id="listtabel" class="table table-bordered">
	   <thead>
	      <tr>
	         <th width="100px">名称</th>
	         <th width="100px">年龄</th>
	         <th></th>
	      </tr>
	   </thead>
	     <tbody>
	     <% if (students && students.length>0 ){ %>  
		    <% students.forEach(function(student){ %>  
		     <tr id="<%=student.id%>">  
		      <td ><%= student.name %></td>  
		      <td ><%= student.age %></td> 
		      <td>
		      	<div class="btn-group">
				  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    操作 <span class="caret"></span>
				  </button>
				  <ul class="dropdown-menu">
				    <li><a href="#" onclick="update('<%=student.id%>')">更新</a></li>
				    <li><a href="#" onclick="deleteById('<%=student.id%>')">删除</a></li>
				  </ul>
				</div>
		      </td>
		       </tr>  
		    <% }) %>    
		<% } %>  
   		</tbody>	
	</table>
</div>

<div id="dialog" title="更新学生">
</div>

<script type="text/javascript">
 	function query(){
		$.post("/student/list",{name:$('#name').val(),age:$('#age').val(),startNumber:0,pageSize:10},function(result,status){
			$("#right >div").remove();
      		$("#right").append(result);
		});
 	}

 	function update(id){
 		$.post("/student/updateView",{id:id},function(result,status){
			var dialog = $( "#dialog" );
			$("#dialog >div").remove();
			dialog.append(result);
			dialog.dialog({width:500,height:300});
		});	
 	}
 	function deleteById(id){
 		$.post("/student/delete",{id:id},function(result,status){
			var code = result.code;
			alert(result.msg);
			$("#"+id).remove();
		});	
 	}
</script>